<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绑定样式</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
            .normal {
                border: 1px solid green;
                height: 50px ;
                line-height: 50px ;
                text-align: center ;
            }
            .active {
                font-size: 30px;
                color: red ;
                font-weight: bold;
            }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="third">
            <div class="row">
                <div class="col-4 offset-8">
                    <input type="radio" v-model="active" value="true" id="true">
                    <label for="true">TRUE</label>
                    <input type="radio" v-model="active" value="false" id="false">
                    <label for="false">FALSE</label>
                </div>
            </div>
            <div :class="{ normal: true , active: isActive }">对象语法</div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        active: 'true'
                    }
                },
                computed: {
                    isActive(){
                        let x = this.active == 'false' ? null : this.active ;
                        return Boolean( x ) ;
                    }
                }
            });

            app.mount( '#third' );
        </script>

    </body>
</html>